<template>
    <!-- 页面头部开始 -->
      <div style="height: 50px;background-color: #2597e8">
     
      </div>
    <!-- 页面头部结束 -->
     
    <!-- 页面下面部分开始 -->
    <!-- flex布局分为左右两边 -->
      <div style="display: flex">
     
          <!-- 侧边导航栏开始   -->
        <div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" >
          <aside class="sidebar">
            <el-menu 
              router 
              :default-active="$route.path" 
              background-color="#fff"
            >
              <el-menu-item index="/data">
                <span>数据查询</span>
              </el-menu-item>
              <el-menu-item index="/data/0">
                <span>各个类型的数量统计</span>
              </el-menu-item>
              <el-menu-item index="/data/0">
                <span>top10作者统计</span>
              </el-menu-item>
              <el-menu-item index="/data/0">
                <span>其他</span>
              </el-menu-item>
            </el-menu>
          </aside>
        </div>
          <!-- 侧边导航栏结束   -->
     
          <!-- 右侧主体区域开始  -->
          <!-- 右侧设置自适应宽度   -->
          <!--  flex是一个 CSS弹性盒布局属性的简写形式，flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时，该元素可以按照比例进行扩展，这里是占据所有剩余空间  -->
        <div style="flex: 1;width: 0;background-color: #edf3f9;padding: 10px">
          <Manage />
        </div>
     
          <!-- 右侧主体区域结束  -->
     
    </div>

</template>
<script>
import Manage from '@/tool/Manage.vue';

export default{
    components:{
        Manage
    }
}
</script>